<template>
  <div id="detailBox">
      <el-form>
        <div class="cl">
          <div class="list-wrap">
            <h3 class="main-title">活动详情<el-button type="text" @click="$router.push({name: 'CampaignReport', params: {id: activityId}})">报表</el-button></h3>
            <div class="title-wrap">
              <el-form-item label="活动标题：">
                <el-input v-model="newForm.name" @change="setNewTitle" placeholder="请输入内容" :disabled="!actCanEdit"></el-input>
              </el-form-item>
              <el-form-item label="活动描述：">
                <el-input type="textarea" :rows="2" v-model="newForm.desc" @change="setNewDesc" placeholder="请输入内容" :disabled="!actCanEdit"></el-input>
              </el-form-item>
              <!-- <el-form-item label="活动时间：">
                <el-date-picker
                  v-model="date"
                  type="daterange"
                  @change="dateChange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期" :disabled="!actCanEdit">
                </el-date-picker>
              </el-form-item> -->
              <el-form-item label="卡券库存：">
                <el-input v-model="newForm.cardNum" placeholder="请输入卡券库存" :disabled="!actCanEdit"></el-input>
              </el-form-item>
              <el-button type="primary" @click="setNewActData" :disabled="!actCanEdit">保存修改内容</el-button>
            </div>
          </div>
          <div class="public-wrap cl">
            <h3 class="main-title">公众号配置</h3>
            <div class="title-wrap">
              <el-form-item label="公众号：" class="gzh-ls">
                <el-select v-model="publicValue" @change="handlePublicNumberChange" placeholder="请选择公众号" :disabled="!shareCanEdit">
                  <el-option
                    v-for="item in publicNumber"
                    :key="item.appid"
                    :label="item.appName"
                    :value="item.appid">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="分享标题：">
                <el-input v-model="shareObj.title" @change="setShareTitle" placeholder="请输入内容" :disabled="!shareCanEdit"></el-input>
              </el-form-item>
              <el-form-item label="分享描述：">
                <el-input type="textarea" :rows="2" v-model="shareObj.desc" @change="setShareDesc" placeholder="请输入内容" :disabled="!shareCanEdit"></el-input>
              </el-form-item>
              <el-button type="primary" @click="setShareInfo" :disabled="!shareCanEdit">保存配置信息</el-button>
            </div>
            <div class="share-box">
              <div class="share-icon" @click="selecImgVisible = shareCanEdit === false ? false : true">
                <div v-if="shareObj.imgUrl">
                  <img :src="shareObj.imgUrl" alt="分享图片" v-if="iconSelected" />
                  <span v-else>+</span>
                </div>
                <div v-else>
                  <span>+</span>
                </div>
              </div>
              <p>分享图片icon
                <el-tooltip class="item" effect="dark" content="建议上传最小大小为30*30" placement="bottom">
                  <i class="el-icon-information"></i>
                </el-tooltip>
              </p>
            </div>
          </div>
        </div>
        <div class="company-wrap" v-for="data,index in department">
          <div v-if="data.created">
            <h2>部门名称：{{ data.departmentName || '无' }}</h2>
            <div class="act-wrap">
              <h3>活动页面</h3>
              <div class="act1 pre-hot">
                <el-button type="primary" @click="handlePreHot(data.departmentId)" :disabled="!data.canEdit">预热</el-button>
                <p @click="handleActImgPreview(pageId = data.micropageMap[1].logicId)">{{ data.micropageMap[1].title || '当前为空' }}</p>
                <el-button type="text" @click="handleEditAction(pageId = data.micropageMap[1].logicId)" v-show="data.micropageMap[1].title" :disabled="!data.canEdit">编辑</el-button>
              </div>
              <div class="act1 act-box">
                <el-button type="primary" @click="handleAction(data.departmentId)" :disabled="!data.canEdit">活动</el-button>
                <p @click="handleActImgPreview(pageId = data.micropageMap[2].logicId)">{{ data.micropageMap[2].title || '当前为空' }}</p>
                <el-button type="text" @click="handleEditAction(pageId = data.micropageMap[2].logicId)" v-show="data.micropageMap[2].title" :disabled="!data.canEdit">编辑</el-button>
              </div>
              <div class="act1 end-box">
                <el-button type="primary" @click="handleEnding(data.departmentId)" :disabled="!data.canEdit">结束</el-button>
                <p @click="handleActImgPreview(pageId = data.micropageMap[3].logicId)">{{ data.micropageMap[3].title || '当前为空' }}</p>
                <el-button type="text" @click="handleEditAction(data.micropageMap[3].logicId)" v-show="data.micropageMap[3].title" :disabled="!data.canEdit">编辑</el-button>
              </div>
              <div class="act1 end-box">
                <el-button type="primary" @click="handleExplain(data.departmentId)" :disabled="!data.canEdit">活动说明</el-button>
                <p @click="handleActImgPreview(pageId = data.micropageMap[4].logicId)">{{ data.micropageMap[4].title || '当前为空' }}
                  <el-tooltip class="item" effect="dark" content="活动说明页面仅为销售代表可见, 详细说明活动相关信息, 页面中配置表单无效" placement="bottom">
                    <i class="el-icon-information"></i>
                  </el-tooltip>
                </p>
                <el-button type="text" @click="handleEditAction(data.micropageMap[4].logicId)" v-show="data.micropageMap[4].title" :disabled="!data.canEdit">编辑</el-button>
              </div>
              <div class="act1">
                <span>活动时间:</span>
                <p>{{dateFormat(dateObj[data.departmentId][0])}} 至 {{dateFormat(dateObj[data.departmentId][1])}}</p>
                <div v-show="data.canEdit" class="date-wrap">
                  <span>修改活动时间：  </span>
                  <el-date-picker
                    v-model="date"
                    type="daterange"
                    @change="val => dateChange(val, data.departmentId)"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期" :disabled="!data.canEdit">
                  </el-date-picker>
                  <el-button type="primary" @click="handleConfirmDatePick(data.departmentId)" v-show="data.canEdit">确定</el-button>
                </div>
              </div>
            </div>
            <div class="poster-wrap clearfix">
              <h3>海报</h3>
              <div class="post-list" v-show="data.posters.length > 0">
                <div v-for="item in data.posters" class="pst">
                  <img :src="baseUrl + '/poster/poster/view?id='+item.posterId" @click="handleImagePreview(item)"  alt="活动海报" />
                  <el-button type="text" size="small" @click="$router.push({name: 'EditPoster', params: {id: item.posterId}})" v-show="data.canEdit">编辑</el-button>
                </div>
              </div>
              <div class="new-box" @click="handleAddPosterItem(index, data.departmentId)" v-if="data.canEdit">
                <span>+</span>
              </div>
              <p v-else>
                (当前状态不可编辑)
              </p>
            </div>
          </div>
        </div>
        <div class="company-wrap" v-for="data,index in department">
          <div v-if="!data.created">
            <h2>部门名称：{{ data.departmentName || '无' }}</h2>
            <div class="act-wrap">
              <h3>活动页面</h3>
              <div class="act1 pre-hot">
                <el-button type="primary" @click="handlePreHot(data.departmentId)" :disabled="!data.canEdit">预热</el-button>
                <p @click="handleActImgPreview(pageId = data.micropageMap[1].logicId)">{{ data.micropageMap[1].title || '当前为空' }}</p>
                <el-button type="text" @click="handleEditAction(pageId = data.micropageMap[1].logicId)" v-show="data.micropageMap[1].title" :disabled="!data.canEdit">编辑</el-button>
              </div>
              <div class="act1 act-box">
                <el-button type="primary" @click="handleAction(data.departmentId)" :disabled="!data.canEdit">活动</el-button>
                <p @click="handleActImgPreview(pageId = data.micropageMap[2].logicId)">{{ data.micropageMap[2].title || '当前为空' }}</p>
                <el-button type="text" @click="handleEditAction(pageId = data.micropageMap[2].logicId)" v-show="data.micropageMap[2].title" :disabled="!data.canEdit">编辑</el-button>
              </div>
              <div class="act1 end-box">
                <el-button type="primary" @click="handleEnding(data.departmentId)" :disabled="!data.canEdit">结束</el-button>
                <p @click="handleActImgPreview(pageId = data.micropageMap[3].logicId)">{{ data.micropageMap[3].title || '当前为空' }}</p>
                <el-button type="text" @click="handleEditAction(data.micropageMap[3].logicId)" v-show="data.micropageMap[3].title" :disabled="!data.canEdit">编辑</el-button>
              </div>
              <div class="act1 end-box">
                <el-button type="primary" @click="handleExplain(data.departmentId)" :disabled="!data.canEdit">活动说明</el-button>
                <p @click="handleActImgPreview(pageId = data.micropageMap[4].logicId)">{{ data.micropageMap[4].title || '当前为空' }}</p>
                <el-button type="text" @click="handleEditAction(data.micropageMap[4].logicId)" v-show="data.micropageMap[4].title" :disabled="!data.canEdit">编辑</el-button>
              </div>
              <div class="act1">
                <span>活动时间:</span>
                <p>{{dateFormat(dateObj[data.departmentId][0])}} 至 {{dateFormat(dateObj[data.departmentId][1])}}</p>
                <div v-show="data.canEdit" class="date-wrap">
                  <span>修改活动时间：  </span>
                  <el-date-picker
                    v-model="date"
                    type="daterange"
                    @change="val => dateChange(val, data.departmentId)"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期" :disabled="!data.canEdit">
                  </el-date-picker>
                  <el-button type="primary" @click="handleConfirmDatePick(data.departmentId)" v-show="data.canEdit">确定</el-button>
                </div>
              </div>
            </div>
            <div class="poster-wrap clearfix">
              <h3>海报</h3>
              <div class="post-list" v-show="data.posters.length > 0">
                <div v-for="item in data.posters" class="pst">
                  <img :src="baseUrl + '/poster/poster/view?id='+item.posterId" @click="handleImagePreview(item)"  alt="活动海报" />
                  <el-button type="text" size="small" @click="$router.push({name: 'EditPoster', params: {id: item.posterId}})" v-show="data.canEdit">编辑</el-button>
                </div>
              </div>
              <div class="new-box" @click="handleAddPosterItem(index, data.departmentId)" v-if="data.canEdit">
                <span>+</span>
              </div>
              <p v-else>
                (当前状态不可编辑)
              </p>
            </div>
          </div>
        </div>
      </el-form>

      <!-- 弹窗 start -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogTableVisible" width="30%" class="popDialog">
        <el-table :data="tableData1.list" border tooltip-effect="dark" @row-click="handleRowClick" class="act-list">
          <el-table-column label="活动ID">
            <template slot-scope="scope">{{ scope.row.microId }}</template>
          </el-table-column>
          <el-table-column label="活动标题">
            <template slot-scope="scope">{{ scope.row.title }}</template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            layout="total, prev, pager, next"
            :total.sync="totalData"
            @current-change="handlePageChange">
          </el-pagination>
        </div>
      </el-dialog>
      <!-- 海报弹窗 -->
      <!-- 选择弹窗-海报-->
      <el-dialog :visible.sync="newOrSelectPoster" width="30%" :before-close="handleClosePop" class="pop-neworselect">
        <el-button type="primary" @click="handlePosterVisible(type = 1)">新建海报</el-button>
        <el-button type="primary" @click="handlePosterVisible(type = 2)">选择已有海报</el-button>
      </el-dialog>
      <!-- 选择弹窗-微页面-->
      <el-dialog :visible.sync="newOrSelectPage" width="30%" :before-close="handleClosePop" class="pop-neworselect">
        <el-button type="primary" @click="handleSelectPage(type = 1)">新建微页面</el-button>
        <el-button type="primary" @click="handleSelectPage(type = 2)">选择已有微页面</el-button>
      </el-dialog>
      <el-dialog title="海报列表" :visible.sync="PostdialogVisible" class="popDialog">
        <div class="postList">
          <a v-for="item in postList" href="javascript:;" @click="handleSelectPoster(item)" :data-id="item.id"><img :src="item.posterUrl" :alt="item.posterName" /></a>
        </div>
        <div class="pagination">
          <el-pagination
            layout="total, prev, pager, next"
            :total.sync="postTotalData"
            @current-change="handlePostPageChange">
          </el-pagination>
        </div>
      </el-dialog>
      <!-- 海报预览 -->
      <el-dialog :visible.sync="imagePreview" :before-close="handleClosePop" width="30%" class="pop-imgpreview">
        <img :src="imgPreviewSrc" alt="海报" width="100%" />
      </el-dialog>
      <!-- 选择图片 -->
      <!-- 选择图片 -->
      <el-dialog ref="dialog" title="选择图片" :visible.sync="selecImgVisible" class="dialog_cover" @open="SELECT_SOURCE({})">
        <dialog-image></dialog-image>
        <div slot="footer">
          <el-button type="primary" @click="handleSelectIcon()" :loading="isSave">确定</el-button>
          <el-button @click="selecImgVisible = false">取消</el-button>
        </div>
      </el-dialog>
      <!-- 弹窗 end -->

  </div>
</template>
<script>
import { mapActions, mapState, mapMutations } from "vuex"
import dialogImage from '@/components/common/content/dialogImage'
import env from '@/config/env'
export default {
  components: {dialogImage},
  data() {
    return {
      baseUrl: env.baseUrl3,
      listData: {},
      activityId: parseInt(this.$route.params.id),
      date: [],
      dateObj: {},
      originDateObj: {},
      originDate: [],
      title: '',
      newForm: {
        name: '',
        dateVal: '',
        desc: ''
      },
      dialogTitle: '预热活动',
      microPages: [],
      dialogType: 1,
      totalData: 0,
      curPage: 1,
      pageSize: 10,
      dialogTableVisible: false,
      tableData1: [],
      multipleSelection: [],
      department: null,
      departmentName: '',
      actCanEdit: false,
      PostdialogVisible: false,
      postList: [],
      postTotalData: 0,
      postPage: 1,
      postSize: 9,
      imagePreview: false,
      imgPreviewSrc: '',
      newOrSelectPage: false,
      publicValue: '',
      publicNumber: [],
      shareObj: {
        publicInfo: {
          appName: '',
          appid: ''
        },
        title: '',
        desc: '',
        imgUrl: ''
      },
      shareCanEdit: true,
      publicTempInfo: {},
      selecImgVisible:false,
      isSave: false,
      iconSelected: false,
      newOrSelectPoster: false,
      departmentId: null,
      tempIndex: 0
    };
  },
  computed: {
    ...mapState({
      detailData: state => state.campaignList.detailData,
      selected: state => state.sourceManage.selected,
      attrs: state => state.contentManage.contentType
    })
  },
  mounted() {
    this.getDetail()
    this.getWXvalidData()
    this.getContentTypes()
  },
  methods: {
    ...mapMutations(['SELECT_SOURCE']),
    ...mapActions(['newCampaignData','getCampaignDetail', 'getActivityPageData', 'getPosterPageData', 'setActivityPageData', 'getPosterPageData', 'setPostData', 'getWXvalidList', 'getContentTypes', 'setWxMpInformation', 'updateActivityTime']),
    getDetail() {
      let _this = this
      this.getCampaignDetail({ 'activityId': this.activityId }).then((res) => {
        if(res.data.code === 1){
          // this.listData = res.data.data.activityInfo
          let listItem = res.data.data.activityInfo
          _this.department = res.data.data.relateData
          _this.departmentName = res.data.data.relateData[0].departmentName
          _this.microPages = res.data.data.relateData[0].micropages
          let microPageData = res.data.data.relateData[0].micropageMap
          // 微信公众号信息
          _this.shareObj.title = res.data.data.wxMp.shareTitle
          _this.shareObj.desc = res.data.data.wxMp.shareDesc
          _this.shareObj.imgUrl = res.data.data.wxMp.shareIconUrl
          _this.publicValue = res.data.data.wxMp.wxMpAppname
          _this.shareObj.publicInfo.appid = res.data.data.wxMp.wxMpAppid
          _this.shareObj.publicInfo.appName = res.data.data.wxMp.wxMpAppname
          _this.actCanEdit = res.data.data.activityInfo.canEdit
          _this.shareCanEdit = res.data.data.wxMp.canEdit
          _this.iconSelected = res.data.data.wxMp.shareIconUrl === '' ? false : true
          // console.log(microPageData)
          /* _this.getUseType(microPageData) */
          // let startTime = new Date(listItem.startTime*1000),
          //     endTime = new Date(listItem.endTime*1000)
          _this.newForm.name = listItem.name
          _this.newForm.desc = listItem.desc
          _this.newForm.cardNum = listItem.cardNum
          // _this.date = [startTime, endTime]
          // _this.originDate = [startTime, endTime]
          _this.department.map((item,index) => {
            _this.dateObj[item.departmentId] = [new Date(item.startTime*1000), new Date(item.endTime*1000)]
            _this.originDateObj[item.departmentId] = [new Date(item.startTime*1000), new Date(item.endTime*1000)]
          })
        }
      })
    },
    dateChange(val,id) {
      // console.log(this.$set)
      // this.$set(this.dateObj, id, val)
      this.date = val
      // this.newForm.dateVal = val
    },
    // 日期格式化
    dateFormat (date) {
      return this.$date.format(new Date(date), 'YYYY-MM-DD')
    },
    setNewTitle(val){
      this.newForm.name = val
    },
    setNewDesc(val){
      this.newForm.desc = val
    },
    setNewActData(){
      let _this = this
      if(!this.newForm.name){
        this.$message({
          message: '请输入活动标题！',
          type: 'info'
        })
        return
      }else if(!this.newForm.desc){
        this.$message({
          message: '请输入活动描述！',
          type: 'info'
        })
        return
      }else if(!this.newForm.cardNum || isNaN(this.newForm.cardNum)){
        this.$message({
          message: '请正确填写库存数量！',
          type: 'info'
        })
        return
      }
      this.newCampaignData({
        activityId: this.activityId,
        name: this.newForm.name,
        desc: this.newForm.desc,
        cardNum: this.newForm.cardNum
      }).then((res) => {
        if(res.data.code ===1){
          _this.$message({
            message: '修改成功！',
            type: 'success'
          });
        }else{
          _this.$message.error(res.data.msgZ);
        }
      })
    },
    handlePreHot(id){
      this.departmentId = id
      this.dialogTitle = '活动预热页面'
      this.dialogType = 1
      this.newOrSelectPage = true
    },
    getActivityList(){
      let prePaylod = {
        activityId: this.activityId,
        departmentId: this.department[0].departmentId,
        pageType: 1,
        page: this.curPage,
        size: this.pageSize,
        publishStatus: 1
      }
      // console.log(prePaylod)
      this.getActivityPageData(prePaylod).then((res) => {
        this.totalData = res.data.data.page.total
        this.tableData1 = res.data.data
      })
    },
    handlePageChange(page){
      this.curPage = page
      this.getActivityList()
    },
    handleRowClick(row){
      // console.log(this.departmentId)
      this.setActivityPageData({
        activityId: this.activityId,
        departmentId: this.departmentId,
        pageId: row.microId,
        pageType: this.dialogType
      }).then((res) => {
        if(res.data.code === 1){
          this.dialogTableVisible = false
          this.totalData = 0
          this.tableData1 = []
          this.getDetail()
        }else {
          this.$message.error(res.data.msgZ);
        }
      })
    },
    handleAction(id){
      this.departmentId = id
      this.dialogTitle = '活动开始页面'
      this.dialogType = 2
      this.newOrSelectPage = true
    },
    handleEnding(id){
      this.departmentId = id
      this.dialogTitle = '活动结束页面'
      this.dialogType = 3
      this.newOrSelectPage = true
    },
    handleExplain(id){
      this.departmentId = id
      this.dialogTitle = '活动说明'
      this.dialogType = 4
      this.newOrSelectPage = true
    },
    handleConfirmDatePick(id){
      let startTime = new Date(this.date[0]).getTime()/1000
      let endTime = new Date(this.date[1]).getTime()/1000
      this.updateActivityTime({
        activityId: this.activityId,
        departmentId: id,
        startTime: startTime,
        endTime: endTime
      }).then((res) => {
        if(res.data.code === 1){
          this.$message.success(res.data.msgZ);
          this.getDetail()
          this.date = []
        }else{
          this.$message.error(res.data.msgZ)
        }
      })
    },
    getPostPageList(){
      this.getPosterPageData({
        way: 0,
        page: this.postPage,
        size: this.postSize
      }).then((res) => {
        if(res.data.code === 1){
          this.postList = res.data.data.list
          this.postTotalData = res.data.data.page.total
          this.PostdialogVisible = true
        }else{
          alert(res.msgZ)
        }
      })
    },
    handlePostPageChange(page){
      this.postPage = page
      this.getPostPageList()
    },
    handleSelectPoster(item){
      // console.log(this.departmentId)
      this.setPostData({
        activityId: this.activityId,
        departmentId: this.departmentId,
        posterId: item.id
      }).then((res) => {
        // this.getDetail()
        if(res.data.code === 1){
          let postObj = {
            posterId: item.id,
            posterName: item.posterName
          }
          // this.posters.push(postObj)
          this.department[this.tempIndex].posters.push(postObj)
          this.PostdialogVisible = false
        }else{
          alert(res.msgZ)
        }
      })
    },
    handleAddPosterItem(index,id) {
      this.departmentId = id
      this.newOrSelectPoster = true
      this.tempIndex = index
    },
    //编辑微页面
    handleEditAction(pageId) {
      this.$router.push({name:'WePage', params: {id: pageId}})
      // window.location.href = '/admin/cont/myContent/editWePage/' + pageId
    },
    // 图片预览
    handleActImgPreview(pageId){ //微页面
      //window.location.href = '//um.10get.com/api/2/content/micro/preview/' + id
      if(pageId > 0){
        window.open('/api/2/content/micro/preview/' + pageId, '_blank')
      }
    },
    handleImagePreview(item) { //海报
      this.imgPreviewSrc = this.baseUrl + '/poster/poster/view?id='+item.posterId
      this.imagePreview = true
    },
    handleClosePop(done){
      done()
    },
    handleSelectPage(type){
      if(type === 1){
        // window.location.href = '/admin/cont/myContent/editWePage/new'
        this.$router.push({name: 'WePage', params: {id: 'new'}})
      }else{
        this.newOrSelectPage = false
        this.dialogTableVisible = true
        this.getActivityList()
      }
    },
    handlePosterVisible(type){
      if(type === 1){
        this.$router.push({name: 'EditPoster', params: {id: 'new'}})
      }else{
        this.newOrSelectPoster = false
        this.getPostPageList()
      }
    },
    getWXvalidData(){
      this.getWXvalidList().then((res) => {
        if(res.data.code === 1){
          this.publicNumber = res.data.data
        }else{
          this.$message.error(res.data.msgZ);
        }
      })
    },
    setShareTitle(val){
      this.shareObj.title = val
    },
    setShareDesc(val){
      this.shareObj.desc = val
    },
    handlePublicNumberChange(val){
      // console.log(val)
      let tempObj = {}
      tempObj = this.publicNumber.find((item) =>{
        return item.appid === val
      })
      this.publicTempInfo = tempObj === undefined ? {appName: '', appid: ''} : tempObj
      if(this.publicTempInfo){
        this.shareObj.publicInfo = this.publicTempInfo
      }
      // this.shareObj.publicInfo = tempObj === undefined ? {appName: '', appid: ''} : tempObj
    },
    handleSelectIcon(){
      this.shareObj.imgUrl = this.selected.url
      this.iconSelected = true
      this.selecImgVisible = false
    },
    setShareInfo(){ //配置公众号信息
      if(!this.shareObj.publicInfo.appid){
        this.$message({
          message: '请选择公众号！',
          type: 'info'
        })
        return
      }
      if(!this.shareObj.title){
        this.$message({
          message: '请输入分享标题！',
          type: 'info'
        })
        return
      }
      if(!this.shareObj.desc){
        this.$message({
          message: '请输入分享描述！',
          type: 'info'
        })
        return
      }
      if(!this.shareObj.imgUrl){
        this.$message({
          message: '请选择分享图标！',
          type: 'info'
        })
        return
      }
      this.shareObj.activityId = this.activityId
      if(this.publicTempInfo.appid){  //如果公众号已修改
        this.shareObj.publicInfo = this.publicTempInfo
      }
      this.setWxMpInformation(this.shareObj).then((res) =>{
        console.log(res)
        if(res.data.code === 1){
          this.$message({
            message: '保存成功！',
            type: 'success'
          })
        }else{
          this.$message({
            message: res.data.msgZ,
            type: 'info'
          })
        }
      })
      // console.log(this.shareObj)
    }
  }
};
</script>

<style lang="scss">
#detailBox {
  .clearfix:after{content:'';clear:both;display:block;height:0;visibility:hidden;}
  .main-title {
    font-size: 16px;
    font-weight: normal;
    border-bottom: 1px solid #ccc;
    padding-bottom: 12px;
    margin-bottom: 12px;
    .el-button{
      line-height: 0;
      margin-left: 50px;
    }
  }
  .list-wrap{
    float: left;
    width: 40%;
    .title-wrap{
      width: 450px;
      display: inline-block;
      .el-input,.el-textarea{
        width: 350px;
      }
    }
    .el-form-item{
      margin-bottom: 10px;
    }
  }
  .public-wrap{
    float: left;
    width: 55%;
    margin-left: 5%;
    .title-wrap{
      width: 400px;
      float: left;
      .el-input, .el-textarea{
        width: 280px;
      }
    }
    .el-form-item{
      margin-bottom: 10px;
    }
    .gzh-ls{
      .el-form-item__label{
        letter-spacing: 3.5px;
      }
    }
    .share-box{
      float: left;
      width: 150px;
      .share-icon{
        display: inline-block;
        width: 150px;
        height: 150px;
        border: 1px solid #ccc;
        text-align: center;
        cursor: pointer;
        span{
          display: block;
          font-size: 20px;
          position: relative;
          top: 60px;
        }
        img{
          width: 150px;
          height: 150px;
        }
      }
      p{
        text-align: center;
        padding-top: 5px;
      }
    }
  }
  .company-wrap{
    margin-top: 20px;
    h2{
      margin: 12px 0 30px;
      border-top: 1px solid #ccc;
      padding-top: 12px;
    }
    .act-wrap{
      h3{
        width: 60px;
        text-align: right;
        margin: 0 35px 10px 0;
      }
      .act1{
        margin-bottom: 10px;
        p{
          display: inline;
          margin-left: 10px;
          cursor: pointer;
        }
        .date-wrap{
          margin-top: 10px;
        }
      }
    }
    .poster-wrap{
      margin-top: 30px;
      border-top: 1px solid #f1f1f1;
      padding-top: 30px;
      h3{
        width: 60px;
        margin: 0 35px 10px 0;
      }
      .new-box{
        display: inline-block;
        width: 150px;height: 200px;
        border: 1px solid #ccc;
        text-align: center;
        cursor: pointer;
        span{
          display: block;
          font-size: 20px;
          position: relative;
          top: 85px;
        }
      }
      p{
        float: left;
        width: 100%;
        color: #ff0000;
      }
    }
  }
  .popDialog{
    .el-table tr{
      cursor: pointer;
    }
  }
  .el-dialog--small{
    width: 670px;
  }
  .postList{
    display: flex;
    flex-wrap: wrap;
    a{
      margin: 0 5px 5px 0;
      img{
        width: 200px;
      }
    }
  }
  .post-list{
    display: flex;
    float: left;
    flex-wrap: wrap;
    .pst{
      height: 200px;
      max-width: 200px;
      margin: 0 10px 10px 0;
      flex: 1;
      position: relative;
    }
    img{
      height: 200px;
      width: 100%;
      cursor: pointer;
    }
    button{
      position: absolute;
      bottom: -2px;
      right: 8px;
      color: #ff0000;
    }
  }
  .pop-neworselect{
    .el-button{
      display: block;
      width: 35%;
      margin: 0 auto 10px;
    }
  }
}
</style>
